<template>
    <div style="margin: 0 20px;">
        <div class="comment" :class="'depth-' + depth" :style="`margin-left: ${depth * 2}px;`">
            <div class="user" :style="{
                border: '1px solid #1abc9e30',
                padding: '4px',
                alignItems: 'center',
                borderRadius: '0px',
                background: '#1abc9e10',
                display: 'flex',
                width: '100%',
                height: 'auto',
            }">
                <img v-if="comment.avatarurl" :style="{
                    width: '36px',
                    margin: '0 10px 0 0',
                    borderRadius: '100%',
                    objectFit: 'cover',
                    height: '36px',
                }" :src="baseUrl + comment.avatarurl" />
                <img v-if="!comment.avatarurl" :style="{
                    width: '36px',
                    margin: '0 10px 0 0',
                    borderRadius: '100%',
                    objectFit: 'cover',
                    height: '36px',
                }" src="@/assets/touxiang.png" />
                <div :style="{ color: '#666', fontSize: '16px' }" class="name">
                    {{ comment.nickname }}
                </div>
            </div>
            <div :style="{
                border: '0px solid #eee',
                padding: '10px',
                margin: '10px 0px 0px',
                color: '#666',
                borderRadius: '4px',
                background: 'none',
                lineHeight: '24px',
                fontSize: '14px',
            }" v-html="comment.content"></div>
            <div class="btn" :style="{
                width: '100%',
                margin: '12px 0 12px 0',
                alignItems: 'center',
                justifyContent: 'flex-end',
                display: 'flex',
                height: 'auto',
            }">
                <el-button :style="{
                    border: '1px solid #1abc9e20',
                    cursor: 'pointer',
                    padding: '0 20px',
                    margin: '0 10px',
                    outline: 'none',
                    color: '#333',
                    borderRadius: '0px',
                    background: '#1abc9e10',
                    width: 'auto',
                    lineHeight: '30px',
                    fontSize: '14px',
                    height: '30px',
                }" @click="replyClick(comment)">回复</el-button>
            </div>
            <div v-if="comment.child && comment.child.length">
                <comment-item v-for="reply in comment.child" :key="reply.id" :comment="reply" :id="id" :depth="depth + 1" @addReply="handleAddReply"/>
            </div>
        </div>

        <el-dialog title="添加评论" :visible.sync="dialogFormVisible">
            <el-form :model="form" ref="form">
                <el-form-item label="评论" label-width="60px" prop="content">
                    <editor :style="{
                        minHeight: '200px',
                        border: '0',
                        outline: 'none',
                        color: '#333',
                        borderRadius: '4px',
                        width: '100%',
                        lineHeight: '32px',
                        fontSize: '14px',
                    }" v-model="form.content" class="editor" action="file/upload">
                    </editor>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addForum('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'commentItem',
    props: ['comment', 'depth', 'id'],
    data() {
        return {
            dialogFormVisible: false,
            form: {},
            baseUrl: '/springbootq81q3hlu/',
            userid: localStorage.getItem("frontUserid"),
        }
    },
    methods: {
        // 回复评论
        replyClick(item) {
            console.log('this.idthis.idthis.id',this.id)
            this.form.parentid = item.id;
            this.form.refid = this.id;
            this.dialogFormVisible = true;
        },
        addForum(formName) {
            let sensitiveWords = "";
            let sensitiveWordsArr = [];
            if (sensitiveWords) {
                sensitiveWordsArr = sensitiveWords.split(",");
            }
            for (var i = 0; i < sensitiveWordsArr.length; i++) {
                //全局替换
                var reg = new RegExp(sensitiveWordsArr[i], "g");
                //判断内容中是否包括敏感词
                if (this.form.content.indexOf(sensitiveWordsArr[i]) > -1) {
                    // 将敏感词替换为 **
                    this.form.content = this.form.content.replace(reg, "**");
                }
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.form.avatarurl = localStorage.getItem("frontHeadportrait")
                        ? localStorage.getItem("frontHeadportrait")
                        : "";
                    this.$http.post("comment/save", this.form).then((res) => {
                        if (res.data.code == 0) {
                            this.$message({
                                type: "success",
                                message: "评论成功!",
                                duration: 1500,
                                onClose: () => {
                                    this.form.content = "";
                                    this.dialogFormVisible = false;
                                    this.$emit('addReply', this.depth);
                                },
                            });
                        }
                    });
                } else {
                    return false;
                }
            });
        },
		// 删除评论
		commentDel(id) {
			this.$confirm("是否删除此评论？")
				.then((_) => {
					this.$http.post("forum/delete", [id]).then((res) => {
						if (res.data && res.data.code == 0) {
							this.$message({
								type: "success",
								message: "删除成功!",
								duration: 1500,
								onClose: () => {
									this.getDetail();
								},
							});
						}
					});
				})
				.catch((_) => { });
		},
        handleAddReply() {
            this.$emit('addReply', this.depth);
        }

    }
}
</script>
<style scoped></style>